<template>
  <div class="box-padding">
    <div v-if="!isModal">
      <Header class="header-cont main__title--top">{{$route.params.name}}</Header>
      <Row>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">所属机构</label>
          <Input v-model="data.enterpriseName"
                 class="input-1"
                 :disabled="true" />
        </div>
        </Col>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">机构类型</label>
          <Select v-model="data.dictOrgType"
                  style="width:300px"
                  :disabled="isDisabled">
            <Option v-for="item in typeList"
                    :value="item.code"
                    :key="item.code">{{ item.name }}</Option>
          </Select>
        </div>
        </Col>
      </Row>

      <Row>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">机构编号</label>
          <Input v-model="data.code"
                 placeholder="请输入机构编号"
                 class="input-1"
                 :disabled="this.$route.params.type != 'add'"
                 maxlength="30" />
        </div>
        </Col>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">管辖项目</label>
          <Input v-model="data.projectName"
                 class="input-1"
                 :disabled="isDisabled"
                 readonly
                 style="margin-right: 10px" />
          <Button @click="clickModal"
                  type="primary"
                  ghost
                  v-show="!isDisabled">选择</Button>
        </div>
        </Col>
      </Row>

      <Row>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">机构全称</label>
          <Input v-model="data.name"
                 class="input-1"
                 :disabled="isDisabled"
                 maxlength="60" />
        </div>
        </Col>
        <Col span="12">
        <div class="col">
          <label :class="{star: !isDisabled}">机构简称</label>
          <Input v-model="data.shortName"
                 class="input-1"
                 :disabled="isDisabled"
                 maxlength="60" />
        </div>
        </Col>
      </Row>
      <div class="col">
        <label :class="{star: !isDisabled}">所在地区</label>
        <Row :gutter="10">
          <Col span="2">
          <Select v-model="obj.provinceId"
                  @on-change="changeProvince"
                  v-show='!isDisabled'>
            <Option v-for="(item, index) in provinceArr"
                    :key="index"
                    :value="item.id">{{ item.name }}</Option>
          </Select>
          <Input v-model='data.provinceName'
                 v-show='isDisabled'
                 disabled />
          </Col>
          <Col span="2"
               v-if="!hideCity">
          <Select v-model="obj.cityId"
                  v-show='!isDisabled'
                  @on-change="changeCity">
            <Option v-for="(item, index) in citiesArr"
                    :key="index"
                    :value="item.id">{{ item.name }}</Option>
          </Select>
          <Input v-model='data.cityName'
                 v-show='isDisabled'
                 disabled />
          </Col>
          <Col span="2"
               v-if="!hideCity">
          <Select v-model="obj.districtId"
                  v-show='!isDisabled'
                  @on-change="changeCounty">
            <Option v-for="(item, index) in countyArr"
                    :key="index"
                    :value="item.id">{{ item.name }}</Option>
          </Select>
          <Input v-model='data.districtName'
                 v-show='isDisabled'
                 disabled />
          </Col>
        </Row>
      </div>
      <div class="col">
        <label :class="{star: !isDisabled}">办公地址</label>
        <Input v-model="data.address"
               class="input-1"
               :disabled="isDisabled"
               maxlength="60" />
      </div>
      <div class="col">
        <label>概况说明</label>
        <Input v-model="data.description"
               maxlength="500"
               type="textarea"
               placeholder="请输入概况说明"
               :rows="4"
               style="width: 500px;height:200px"
               :disabled="isDisabled" />
      </div>
      <div class="foot-modal"
           v-show="!isDisabled">
        <Row>
          <Col span="2"
               offset="8">
          <Button type="primary"
                  @click="save">保存</Button>
          </Col>
          <Col span="2">
          <Button @click="closeTab">取消</Button>
          </Col>
        </Row>
      </div>
    </div>

    <manageModal @func="getMsg"
                 v-if="isModal"></manageModal>
  </div>
</template>

<script>
import manageModal from './manageModal.vue'
import { mapMutations, mapState, mapActions } from 'vuex'
export default {
  components: { manageModal },
  data() {
    return {
      typeList: [],
      proList: [],
      data: {}, //详情数据保存
      isDisabled: false,
      isModal: false,
      obj: {
        //地区信息
        provinceId: '',
        cityId: '',
        districtId: ''
      },
      provinceArr: [],
      citiesArr: [],
      countyArr: [],
      params: {
        whereMap: {
          parentId: '0'
        }
      },
      hideCity: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    ...mapActions(['getNode']),
    closeTab() {
      this.closeTag({
        name: this.$route.name,
        params: this.$route.params
      })
    },
    getTypeList() {
      //获取机构类型列表
      this.$api.user
        .dictTypeCode('ORG_TYPE')
        .then(res => {
          if (res.code === 200) {
            this.typeList = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('获取类型失败')
        })
    },
    getProList(type, id) {
      //机构编号
      this.$api.ProjectTeam.findCode(type, id, 'org')
        .then(res => {
          if (res.code === 200) {
            this.data.code = res.data
          } else {
            this.$Message.warning(res.message)
          }
        })
        .catch(() => {
          this.$Message.warning('生成编号失败')
        })
    },
    getDetail(id) {
      if (this.$route.params.name === '日志详情') {
        this.$api.operationLog.getOperationLogDetail(id).then(res => {
          if (res.code === 200) {
            this.data = JSON.parse(res.data.params)
          } else {
            this.$Message.error(res.message)
          }
        })
      } else {
        this.$api.ProjectTeam.getDetail(id).then(res => {
          if (res.code == 200) {
            this.data = res.data
            this.data.projectName = res.data.projectShortName
            this.obj = {
              provinceId: res.data.provinceId,
              cityId: res.data.cityId,
              districtId: res.data.districtId
            }
            if (this.$route.params.type == 'edit') {
              //编辑时回显省市区
              this.params = {
                whereMap: {
                  parentId: 0
                }
              }
              this.$api.companyOrganization
                .regionList(this.params)
                .then(resp => {
                  if (resp.code == 200) {
                    this.provinceArr = resp.data.resultObject
                    if (this.obj.cityId) {
                      //排除港澳台
                      this.params = {
                        whereMap: {
                          parentId: this.obj.provinceId
                        }
                      }
                      this.$api.companyOrganization
                        .regionList(this.params)
                        .then(resp => {
                          if (resp.code == 200) {
                            this.citiesArr = resp.data.resultObject
                            this.params = {
                              whereMap: {
                                parentId: this.obj.cityId
                              }
                            }
                            this.$api.companyOrganization
                              .regionList(this.params)
                              .then(resp => {
                                if (resp.code == 200) {
                                  this.countyArr = resp.data.resultObject
                                } else {
                                  this.$Message.warning(resp.message)
                                }
                              })
                          } else {
                            this.$Message.warning(resp.message)
                          }
                        })
                    }
                  } else {
                    this.$Message.warning(resp.message)
                  }
                })
            }
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
    save() {
      let params = this.$route.params
      if (!this.data.dictOrgType) {
        this.$Message.warning('请选择机构类型')
      } else if (!this.data.code) {
        this.$Message.warning('请填写机构编号')
      } else if (!this.data.projectName) {
        this.$Message.warning('请选择管辖项目')
      } else if (!this.data.name) {
        this.$Message.warning('请填写机构全称')
      } else if (!this.data.shortName) {
        this.$Message.warning('请填写机构简称')
      } else if (!this.data.address) {
        this.$Message.warning('请填写办公地址')
      } else if (!this.obj.provinceId) {
        this.$Message.warning('请选择省份')
      } else if (!this.obj.cityId && !this.hideCity) {
        //排除港澳台
        this.$Message.warning('请选择城市')
      } else if (!this.obj.districtId && !this.hideCity) {
        this.$Message.warning('请选择地区')
      } else {
        if (this.$route.params.type === 'add') {
          let reqData = {
            enterpriseId: this.data.enterpriseId,
            enterpriseName: this.data.enterpriseName,
            enterpriseShortName: this.data.enterpriseShortName,
            type: this.data.type,
            dictOrgType: this.data.dictOrgType,
            code: this.data.code,
            projectId: this.data.projectId,
            projectName: this.data.projectName,
            name: this.data.name,
            shortName: this.data.shortName,
            address: this.data.address,
            description: this.data.description,
            provinceId: this.obj.provinceId,
            cityId: this.obj.cityId,
            districtId: this.obj.districtId,
            provinceName: this.data.provinceName,
            cityName: this.data.cityName,
            districtName: this.data.districtName
          }
          this.$api.ProjectTeam.add(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              res.data.mode = 'add'
              res.data.children = []
              this.getNode(res.data)
              this.$router.push({
                name: 'project-team'
              })
              this.closeTag({
                name: 'project-team-org-add',
                params: params
              })
            } else {
              this.$Message.warning(res.message)
            }
          })
        } else {
          let reqData = {
            id: this.data.id,
            enterpriseId: this.data.enterpriseId,
            enterpriseName: this.data.enterpriseName,
            enterpriseShortName: this.data.enterpriseShortName,
            type: this.data.type,
            dictOrgType: this.data.dictOrgType,
            code: this.data.code,
            projectId: this.data.projectId,
            projectName: this.data.projectName,
            name: this.data.name,
            shortName: this.data.shortName,
            address: this.data.address,
            description: this.data.description,
            provinceId: this.obj.provinceId,
            cityId: this.obj.cityId,
            districtId: this.obj.districtId,
            provinceName: this.data.provinceName,
            cityName: this.data.cityName,
            districtName: this.data.districtName
          }
          this.$api.ProjectTeam.edit(reqData).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.message)
              res.data.mode = 'edit'
              res.data.children = []
              this.getNode(res.data)
              this.$router.push({
                name: 'project-team'
              })
              this.closeTag({
                name: 'project-team-org-edit',
                params: params
              })
            } else {
              this.$Message.warning(res.message)
            }
          })
        }
      }
    },
    clickModal() {
      this.isModal = !this.isModal
    },
    getMsg(data) {
      //从子组件获取项目信息
      this.data.projectId = data.projectId
      this.data.projectName = data.projectName
      this.isModal = false
    },
    // 省市区三级联动
    regionList(type) {
      this.$api.companyOrganization.regionList(this.params).then(resp => {
        if (resp.code == 200) {
          if (type == 'city') {
            this.citiesArr = resp.data.resultObject
          } else if (type == 'district') {
            this.countyArr = resp.data.resultObject
          } else {
            this.provinceArr = resp.data.resultObject
          }
        } else {
          this.$Message.warning(resp.message)
        }
      })
    },
    changeProvince(id) {
      if (
        id == '420020743536119808' ||
        id == '420020743292850176' ||
        id == '420020743779389440'
      ) {
        //港澳台
        this.hideCity = true
      } else {
        this.hideCity = false
        this.citiesArr = []
        this.countyArr = []
        this.obj.districtId = ''
        this.params.whereMap.parentId = id
        this.regionList('city')
      }
      let item = this.provinceArr.find(i => {
        if (i.id == id) {
          return i
        }
      })
      this.data.provinceName = item.name
    },
    changeCity(id) {
      this.params.whereMap.parentId = id
      this.obj.districtId = ''
      this.regionList('district')
      let item = this.citiesArr.find(i => {
        if (i.id == id) {
          return i
        }
      })
      this.data.cityName = item.name
    },
    changeCounty(id) {
      let item = this.countyArr.find(i => {
        if (i.id == id) {
          return i
        }
      })
      this.data.districtName = item.name
    }
  },
  mounted() {
    this.getTypeList()

    this.isDisabled = this.$route.params.type == 'details' ? true : false
    if (this.$route.params.type != 'add') {
      this.getDetail(this.$route.params.objectId)
    } else {
      this.data = {
        enterpriseShortName: this.$route.params.enterpriseShortName,
        enterpriseName: this.$route.params.enterpriseName,
        enterpriseId: this.$route.params.enterpriseId,
        type: this.$route.params.typeObj,
        objectId: this.$route.params.objectId
      }

      this.getProList(
        this.$route.params.typeObj,
        this.$route.params.enterpriseId
      ) //获取code码
      this.provinceArr = []
      this.citiesArr = []
      this.countyArr = []
      this.params = {
        whereMap: {
          parentId: '0'
        }
      }
      this.regionList('province')
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 5px;
  .col-item {
    display: inline-block;
    margin-right: 10px;
  }
  label {
    display: block;
  }
  .input-1 {
    width: 300px;
  }
  .input-2 {
    width: 150px;
  }
}
.asterisk:before {
  content: '*';
}
.header-modal {
  padding: 30px 10px;
  font-size: 16px;
  font-weight: bold;
}
.foot-modal {
  height: 100px;
  width: 100%;
  text-align: center;
  position: fix;
  bottom: 20px;
}
.star:before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 14px;
  color: #ed4014;
}
</style>
